<template>
  <div>
    <el-transfer
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入城市拼音"
      :value="value"
      :data="data"
      @input="input($event)"
    >
    </el-transfer>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      data: [],
      filterMethod (query, item) {
        console.log(query, item, 1111)
        return item.name_pinyin.includes(query) || item.label.includes(query)
      }
    }
  },
  props: {
    value: Array,
    default () {
      return []
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  created () {
    this.getDataLists()
  },
  methods: {
    async getDataLists () {
      try {
        const res = await axios({
          method: 'get',
          url: '/data/roles.json'
        })
        this.formatDataLists(res.data)
        console.log(res.data)
      } catch (error) {
        console.log(error.response)
      }
    },
    formatDataLists (dataLists) {
      dataLists.forEach(item => {
        this.data.push({
          label: item.name,
          key: item.id,
          name_pinyin: item.name_pinyin
        })
      })
    },
    input (e) {
      console.log(e)
      this.$emit('input', e)
    }
  }
}
</script>
<style lang="stylus" scoped></style>
